<template>
  <view class="start">

    <view class="start-header">
        <view class="title">该服务支持所有IMEI/序列号保修、容量、颜色查询与 Apple 官方同步，100%准确</view>
        <view class="body">*支持 iPhone/iPad/iPod/Apple Watch/Mac 等所有苹果产品验机</view>
    </view>


        <view class="input-view">
            <input class="input" v-model="userInput" placeholder-style="color:#fff" />
            <fui-icon name="scan"></fui-icon>
        </view>

        <view class="imei-tip">请输入你的序列号或IMEI</view>

        <view class="mr-commit" @click="commit"> 观看广告查询</view>

        <view class="tip-item">
            <view class="tip-name">
                查询方法:
            </view>
        </view>
        <view class="tip-body">
            1.设置->通用->关于本机->序列号/imei，长按即可复制
        </view>


        <view class="tip-item">
            <view class="tip-name">
                温馨提示:
            </view>
        </view>
        <view class="tip-body">
            1.请在查询前，确认能在官网查询确定序列号没问题，如在官网查询序列号出现房列吴无效
        </view>

        <LandscapeModel v-model:show="show" :sonFun="sonFun"/>

  </view>
</template>

<script setup lang="ts">
import LandscapeModel from "@/components/Landscape/LandscapeModel.vue";
import { EnumStatus } from "@/utils/constants";
import dyUserPlayingService from "@/api/dyUserPlayingService";
const show = ref(false)
const emit = defineEmits(['update:defStatus','update:content'])
const userInput = ref()
const sonFun = async()=>{
    //  const data = await onlinebmicalculator(height.value,kg.value)

    emit('update:defStatus',EnumStatus.RESULT)
    emit('update:content','今日次数已用完或者系统繁忙、序列号错误等')
}

  const commit = async()=>{
    if(!userInput.value){
        uni.showToast({
        title: "请输入正确的数值",
        duration: 2000,
        icon:"none"
      });
      return
    }
    const {result}  = await dyUserPlayingService.sensitiveWord({word:userInput.value})
    if(result){
        uni.hideLoading()
        uni.showToast({
            title: '存在敏感词,请重新填写',
            duration: 2000,
            icon:"none"
        });
        return
    }
    show.value = true
}


</script>

<style lang="scss" scoped>
.start{
    .tip-item{
        padding: 10rpx;
        margin: 0 5%;
        border-bottom: 10rpx solid rgb(255,247,153);
        .tip-name{
            background: rgb(255,247,153);
            padding: 20rpx;
            width: 50%;
            font-weight: bolder;
        }
    }
    .tip-body{
        margin: 10% 5%;
        font-size: 25rpx;
    }
    .start-header{
        height: 150rpx;
        background:rgb(52,118,254);
        padding: 80rpx;
        padding-top: 30%;
        color: white;
        line-height: 50rpx;
        .body{
            font-size: 28rpx;
        }
        .title{
            font-size: 32rpx;
            font-weight: bolder;
        }
    }


    .mr-commit{
      width: 70%;
      padding:20rpx 0; 
      border-radius: 18rpx;
      margin: 10% auto;
      left: 27%;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      background-color: rgb(0,129,255);
  }
  .mr-commit-big{
      top: 49%;
      width: 50%;
      height: 150rpx;
      left: 25%;
      transition: all 1s;
  }
  .mr-commit-small{
      top: 48%;;
      width: 46%;
      height: 130rpx;
      left: 27%;
      transition: all 1s;
  }
  .input-view{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 64rpx;
    margin: 10% auto;
    width: 67%;   
    background: rgb(255, 255, 255);
    padding: 0 20rpx;
    .input{
        padding: 20rpx 0;
        height: 100rpx;
        background-size: 100% 100%;
        z-index: 10;
        text-align: center;
        }  
  }
    .input-tip{
        width: 50%;
        height: 80rpx;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: absolute;
        left: 25%;
        top: 25%; 
    }

    .imei-tip{
        font-size: 28rpx;
        text-align: center;
    }
}

</style>
